<template>
    <div class="patient-container">
      <el-row>
        <el-col :span="18">
           <!-- 搜索栏 -->
      <div class="search-bar">
        <input 
          v-model="Name" 
          placeholder="请输入患者姓名" 
          class="search-input"
        >
        <input 
          v-model="phone" 
          placeholder="电话搜索" 
          class="search-input"
        >
        <input 
          v-model="idCard" 
          placeholder="身份证号码" 
          class="search-input"
        >
        <button class="refresh-btn" @click="pagePatient()">搜索</button>
        <button class="refresh-btn" @click="reloadPage()">刷新</button>
      </div>
        </el-col>
        <el-col :span="6">

        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="dialogVisible = false" :icon="'Plus'">
            查看档案
            </el-button>
            <el-button type="success" @click="dialogVisible = false" :icon="'EditPen'">
            查看救诊病例
            </el-button>
        </el-col>
        <el-col :span="18">

        </el-col>
        <hr>

      </el-row>
     
  
      <!-- 数据表格 -->
      <table class="patient-table">
        <thead>
          <tr> 
            <th>姓名</th>
            <th>电话</th>
            <th>身份证号</th>
            <th>出生年月</th>
            <th>年龄</th>
            <th>性别</th>
            <th>信息状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(patient, index) in filteredPatients" :key="index">
            <td>{{ patient.name }}</td>
            <td>{{ patient.phone }}</td>
            <td>{{ patient.idCard }}</td>
            <td>{{ patient.birthday}}</td>
            <td>{{ calculateAge(patient.birthday)}}</td>
            <td>{{ patient.sex==0?'男':'女' }}
              {{ patient.sex==1?'女':'男' }}
            </td>
            <td>{{ patient.isFinal!=1?'未完善':'已完善' }}</td>
            <td> {{formatDate( patient.createTime,'YYYY/M/DD/ HH:mm:ss' )}}</td>
            <td><el-button type="primary" @click="getBYIdhuanz(patient.patientId,patient.name )" :icon="'Plus'">
            查看档案
            </el-button>
            <el-button type="success" @click="select(patient.patientId,patient.name )" :icon="'EditPen'">
            查看救诊病例
            </el-button>
          </td>
          </tr>
         
        </tbody>
        
      </table>
      <div class="demonstration"></div>
    <el-pagination
      :page-sizes="[10, 20, 30, 50]"
      :size="PageSize"
      layout="sizes, prev, pager, next"
      :total=total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <!-- 查看患者档案  -->
   <div style="width: 80%;">
    <el-dialog v-model="dialogVisible" :modal="false" width="80%">
    <span>  <div class="patient-profile">
    <h1>查询【{{ patient.name }}】患者档案</h1>
    
    <div class="profile-container">
      <!-- 基本信息列 -->
      <div class="column">
        <div class="field">
          <label>ID:</label>
          <span :text="patient.patientId">aa{{ patient.patientId  }}</span>
        </div>
        <div class="field">
          <label>姓名:</label>
          <span>{{ patient.name }}</span>
        </div>
        <div class="field">
          <label>身份证号:</label>
          <span>{{ patient.idCard }}</span>
        </div>
        <div class="field">
          <label>电话:</label>
          <span>{{ patient.phone }}</span>
        </div>
        <div class="field">
          <label>性别:</label>
          <span>{{ patient.sex!=0?'女':'男' }}</span>
        </div>
        <div class="field">
          <label>出生年月:</label>
          <span>{{ patient.birthday }}</span>
        </div>
        <div class="field">
          <label>地址信息:</label>
          <span>{{ patient.address }}</span>
        </div>
      </div>

      <!-- 医疗信息列 -->
      <div class="column">
        <div class="field">
          <label>过敏信息:</label>
          <span>{{ patient.allergyInfo || '无' }}</span>
        </div>
        <div class="field">
          <label>血型:</label>
          <span>{{ patient.hisPatientFile.bloodType || '未填写' }}</span>
        </div>
        <div class="field">
          <label>身高:</label>
          <span>{{ patient.hisPatientFile.height || '未测量' }}</span>
        </div>
        <div class="field">
          <label>体重:</label>
          <span>{{ patient.hisPatientFile.weight || '未测量' }}</span>
        </div>
        <div class="field">
          <label>左眼视力:</label>
          <span>{{ patient.hisPatientFile.leftVision || '未检查' }}</span>
        </div>
        <div class="field">
          <label>右眼视力:</label>
          <span>{{ patient.hisPatientFile.rightVision || '未检查' }}</span>
        </div>
      </div>

      <!-- 系统信息列 -->
      <div class="column">
        <div class="field">
          <label>创建时间:</label>
          <span>{{formatDate(patient.createTime,"YYYY年MM月DD日 HH:mm") }}</span>
        </div>
        <div class="field">
          <label>更新时间:</label>
          <span>{{formatDate(patient.updateTime,"YYYY年MM月DD日 HH:mm") }}</span>
        </div>
        <div class="field">
          <label>紧急联系人:</label>
          <span>{{ patient.hisPatientFile.emergencyContactName || '未填写' }}</span>
        </div>
        <div class="field">
          <label>联系人电话:</label>
          <span>{{ patient.hisPatientFile.emergencyContactPhone || '未填写' }}</span>
        </div>
        <div class="field">
          <label>最后登录时间:</label>
          <span>{{ patient.lastLoginIp || '无记录' }}</span>
        </div>
      </div>
    </div>
  </div></span>
    <template #footer>
      <div class="dialog-footer">
   
        <el-button type="primary" @click="dialogVisible=false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
   </div>
   <!-- 模态框 -->
    <!-- 模态框 -->
     <div>
    <el-dialog
    v-model="dialogVisible2"
      title="唐军鹏就诊病例"
      width="50%"
      :before-close="handleClose"
    >
      <div class="modal-content">
        <p>ID: {{ patientC.patientId }}</p>
        <p>姓名: {{ patientC.name}}</p>
        <p>身份证号: {{ patientC.idCard}}</p>
        <p>电话: {{ patientC.phone}}</p>
        <p>科室: {{ patientC.deptName}}</p>
        <p>就诊时间:{{ patientC.name}}</p>

        <h3>主诉与诊断</h3>
        <p>主诉: {{ patientC.caseTitle}}</p>
        <p>诊断信息: {{ patientC.caseResult}}</p>

        <h3>医生建议</h3>
        <p>{{ patientC.doctorTips}}</p>
        <p>备注: {{ patientC.remark}}</p>

        <h3>药用处方</h3>
        <table>
          <thead>
            <tr>
              <th>药品名称</th>
              <th>数量</th>
              <th>单价(元)</th>
              <th>金额(元)</th>
              <th>备注</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody v-for="item in patientC.hisCareOrderItems" :key="item.patientId">
            <tr>
              <td>{{ item.itemName }}</td>
              <td>{{ item.num }}</td>
              <td>{{ item.price }}</td>
              <td>{{ item.amount }}</td>
              <td>{{ item.remark }}</td>
              <td>{{ item.status==0?'未支付':'' }}
                {{ item.status==1?'已支付':'' }}
                {{ item.status==2?'已退费':'' }}
                {{ item.status==3?'已完成':'' }}

              </td>
            </tr>
           
          </tbody>
        </table>

        <!-- 注意：检查处方被取消，因此不在模态框中显示 -->
      </div>
    </el-dialog>
  </div>
  </template>
  
  <script setup lang="ts">
  import { ElMessage } from 'element-plus'; // 引入消息组件
  import http from '@/http';
import { ref, computed, h } from 'vue';
  import { onMounted } from 'vue';
  import { formatDate } from '@/utils/dateFormatter';//引入全局日期格式化工具
  const searchKeyword = ref('');
  import type { ComponentSize } from 'element-plus'
import { it } from 'element-plus/es/locale';
  // 原始数据
  const patients = ref([
    {
      time: '唐军鹏',
      name: '唐军鹏',
      phone: '1897359609',
      idNumber: '520324194601237984',
      birthdate: '2015-06-18',
      age: 9,
      gender: '男',
      status: '未完备',
      createTime: '2024/6/28 14:11:49'
    },
    // 其他数据...
  ]);
  
  // 自动计算年龄
  const calculateAge = (birthdate) => {
    const birthYear = new Date(birthdate).getFullYear();
    return new Date().getFullYear() - birthYear;
  };
  
  // 在数据初始化时调用
  patients.value.forEach(p => {
    p.age = calculateAge(p.birthdate);
  });
  
  // 过滤后的数据
  const filteredPatients = computed(() => {
    return patients.value.filter(patient => 
      patient.name.includes(searchKeyword.value) ||
      patient.phone.includes(searchKeyword.value)
  )
  });
  let PageNum=ref(1);
  let PageSize=ref(10);
  //患者姓名
  let Name=ref('')
  //电话
  let phone=ref('')
  //身份证
  let idCard=ref('')
  let total=ref()
  //挂载
  onMounted(()=>{
    //分页查询所有的患者信息
    pagePatient();
  })
  function pagePatient(){
    //发送hhtp请求
    http.get("/patient/pagePatient",{params:{
      PageNum:PageNum.value,
      PageSize:PageSize.value,
      Name:Name.value,
      Phone:phone.value,
      IdCard:idCard.value
    }}).then((res)=>{
      patients.value=res.list
      total.value=res.total
      console.log("成功",res.list)
    }).catch((res)=>{
      console.log("失败")
    })
  }
  const handleSizeChange = (val: number) => {
PageSize.value=val
pagePatient();
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  PageNum.value=val
  pagePatient();
  console.log(`current page: ${val}`)
}
const open = (name) => {
 ElMessage({
  message: `${name}患者没有档案`, // 使用反引号包裹字符串
        type: 'success',
        duration: 3000
      });
};
const open2 = (name) => {
 ElMessage({
  message: `${name}患者没有救诊病例`, // 使用反引号包裹字符串
        type: 'success',
        duration: 3000
      });
};
//控制查看患者档案模态框
let dialogVisible = ref(false)
let patient=ref({
  
      })
      //
      function getBYIdhuanz(patientId,name){
        
        //发送http
        http.get("/patient/getUserBYId?id="+patientId).then((res)=>{
          if(!res){
            open(name);
            return;
}else{
   console.log("成功",res)
          patient.value=res
          console.log(patient.value)
  dialogVisible.value=name;
}
         
        }).catch(()=>{
          console.log("失败")
        }).finally(()=>{
        
        })
      }
      //
      let patientC=ref([])
      //查看我的救诊病例
      function select(id,name){
        //发送http请求
        http.get("/patient/selectById?id="+id).then((res)=>{
          patientC.value=res
          console.log("成功",res)
          if(!res){
            open2(name);
            return;
          }else{
            dialogVisible2.value=true;
          } 
        }).catch((res)=>{
          console.log("失败")
        })
       
      }

    const dialogVisible2 = ref(false);

    const handleClose = () => {
      dialogVisible2.value=false
      // 可以在这里添加关闭模态框前的逻辑
      console.log('模态框已关闭');
    };
//刷新
const reloadPage = () => {
  window.location.reload();
};

  </script>
  
  <style scoped>
  .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
  .patient-container {
    padding: 20px;
    background: #fff;
    font-family: 'Microsoft YaHei', sans-serif;
  }
  
  .search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
  }
  
  .search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
  }
  
  .refresh-btn {
    padding: 8px 16px;
    background: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .patient-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ebeef5;
  }
  
  .patient-table th {
    background: #f5f7fa;
    color: #909399;
    font-weight: 500;
    padding: 12px;
    border: 1px solid #ebeef5;
    text-align: left;
  }
  
  .patient-table td {
    padding: 12px;
    border: 1px solid #ebeef5;
    color: #606266;
    font-size: 14px;
  }
  
  .checkbox-cell {
    color: #409EFF;
    font-size: 16px;
    text-align: center;
  }
  
  .status-tag {
    display: inline-block;
    padding: 4px 8px;
    background: #fef0f0;
    color: #f56c6c;
    border-radius: 4px;
    font-size: 12px;
  }
  
  /* 交互效果 */
  .search-input:focus {
    border-color: #409EFF;
    outline: none;
    box-shadow: 0 0 0 2px rgba(64,158,255,.2);
  }
  
  .refresh-btn:hover {
    background: #66b1ff;
  }
  
  .patient-table tr:hover td {
    background-color: #f5f7fa;
  }
  /* 添加斑马纹效果 */
  .patient-table tr:nth-child(even) {
    background-color: #fafafa;
  }
  
  /* 添加表格滚动 */
  .patient-container {
    overflow-x: auto;
  }
  /* 模态框样式 */
  .modal-content {
  padding: 20px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
  text-align: left;
}
  </style>